<template>
    <div class="Tabs">
        <yd-tab v-model="tab" active-color="#3B83FF">
            <yd-tab-panel v-for="(item, index) in items" :key="index" :label="item.title"></yd-tab-panel>
        </yd-tab>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
@Component({
    name: 'Tabs'
})
export default class extends Vue {
    @Prop()
    private items!: any[];
    @Prop()
    private default?: number;

    private tab: number = 0;
    @Watch('tab')
    private onTabChange(): void {
        this.$emit('tabClick', this.items[this.tab])
    }
    private mounted(): void {
        if (this.default) {
            this.tab = this.default;
        }
    }
    @Watch('default')
    private onDefaultChange(): void {
        if (this.default) {
            this.tab = this.default;
        }
    }
}
</script>

<style scoped lang="less">
.Tabs {
    /*margin-top: 0.2rem;*/
    border-radius: 0.1rem;
    overflow: hidden;
}
</style>
